<template>
	<view>
		<view style="width: 694rpx;padding: 45rpx 30rpx;box-sizing: border-box;background: #FFFFFF;border-radius: 32rpx;margin-left: 27.77rpx;margin-top: 20rpx;">
			<view style="font-size: 35rpx;font-weight: bold;margin-bottom: 20rpx;">请写下您的问题或建议</view>
			<view style="margin-bottom: 30rpx;">
				<textarea style="border: 1rpx #000000 solid;width: 634rpx;padding: 15rpx;font-size: 28rpx;box-sizing: border-box;" maxlength="1000" v-model="content"></textarea>
			</view>
			<view style="display: flex;margin-top: 39rpx;flex-wrap: wrap;">
				<view  style="display: flex;margin-top: 39rpx;flex-wrap: wrap;">
					<view v-for="(itme,index) in img_list" :key="index"  style="margin-left: 36rpx;width: 170rpx;height: 170rpx;position: relative;margin-bottom: 20rpx;" @tap.stop="cha_kan(index)">
						<image :src="itme" mode="" style="width: 150rpx;height: 150rpx;border-radius: 12rpx;border: #D6D6D6 0.09rpx solid;" ></image>
						<view style="width: 50rpx;height: 50rpx;position: absolute;top: -25rpx;left: 135rpx;" @tap.stop="shanchu(index)">
							<image :src="chahao" style="width: 50rpx;height: 50rpx;"></image>
						</view>
					</view>
					<view  @tap="addl">
						<image :src="shangchuan" style="width: 150rpx;height: 150rpx;margin-left: 36rpx;"></image>
					</view>
				</view>
			</view>
		</view>
		<view style="width: 694rpx;padding: 45rpx 30rpx;box-sizing: border-box;background: #FFFFFF;border-radius: 32rpx;margin-left: 27.77rpx;margin-top: 20rpx;">
			<button type="primary" @click="fankui" style="background:#EE7B30 ;">提交</button>
		</view>
	</view>
</template>
<script>
	import qiniu from "../../../common/qiniuUploader.js"
	export default {
		data(){
			return {
				content: "",
				key: "",
				token: "",
				img_list: [],
				user_id: "",
				shangchuan: "http://img.curiousmore.com/644187",
				chahao: "http://img.curiousmore.com/566544",
				token_list: [],
				count: 4,
				number_count: 0,
				filePath_list: [],
				key_list: [],
				shujuke: [
					
				],
				num: 1
			}
		},
		methods:{
			cha_kan(index){
				let me = this
				 uni.previewImage({
					  urls: me.img_list,
					  indicator: "number",
					  current:index
				 })
			},
			shanchu(index){
				this.img_list.splice(index,1)
			},
			to(){
				let me = this
				me.key = Math.ceil(Math.random()*1000000)*Math.ceil(Math.random()*1000000)
				let my = me.key
				uni.request({
					url:"https://curiousmore.com/qmore/push/upload/getToken",
					data:{
						key: my
					},
					method:"post",
					header: {
						'content-type' : 'application/json'
					},
					success:(res) => {
						me.token = res.data.data
						me.token_list.push(res.data.data)
						let shuju_list = {
							token: res.data.data,
							key: my
						}
						me.shujuke.push(shuju_list)
					}
				})
			},
			addl(){
				let me = this
				me.filePath_list = []
				me.token_list = []
				me.key_list = []
				me.shujuke = []
				me.count = 4 - me.img_list.length
				uni.showActionSheet({
				  itemList: ['从手机相册选择', '拍照'],
				  success: function(res) {
					let aa = []
					if(res.tapIndex == 1){
						aa = ["camera"]
					}else{
						aa = ["album"]
					}
					uni.chooseImage({
						count: me.count,
						sizeType: ['compressed'],
						sourceType: aa,
						success:(res_) => {
							let filePath = res_.tempFilePaths[0]
							me.filePath_list = res_.tempFilePaths
							me.number_count = res_.tempFilePaths.length
							for(let i = 0; i < res_.tempFilePaths.length ; i++ ){
								me.to()
							}
							setTimeout(() => {
								me.shangchuan_img()
							},500)
						}
					})
				  },
				fail: function(res) {
				    console.log(res.errMsg)
				  }
				})
			},
												
			shangchuan_img() {
				let me = this
				for(let i = 0 ; i < this.number_count ; i++){
					qiniu.upload(me.filePath_list[i], (res) => {
						me.img_list.push(res.fileUrl)
					}, (error) => {
						console.log('error: ' + error);
					}, {
						region: 'ECN',
						domain: 'http://img.curiousmore.com', 
						uptoken: me.shujuke[i].token, 
						key: me.shujuke[i].key
					}, (res) => {
						
					}, () => {
						// 取消上传
					}, () => {
						// `before` 上传前执行的操作
					}, (err) => {
						// `complete` 上传接受后执行的操作(无论成功还是失败都执行)
					});
				}
			},
			
			fankui(){
				if(this.content != "" && this.img_list.length != 0){
					uni.request({
						url: "https://curiousmore.com/qmore/message/systemFeedBack/insert",
						data: {
							content: this.content,
							user_id: this.user_id,
							pic: this.img_list.toString()
						},
						method: "post",
						header: {
							'content-type':'application/json'
						},
						success: (res) => {
							if(res.data.code == 0){
								uni.showToast({
									title: "提交成功",
									duration: 1000
								})
								uni.navigateBack({
								    delta: 1
								})
							}
						},
						fail: (err) => {
							console.log(err)
						}
					})
				}else{
					uni.showToast({
						title: "请填写完整信息",
						icon: "none",
						duration: 2000
					})
				}
				
			}
		},
		onLoad() {
			try{
				this.user_id = uni.getStorageSync('userif_list').user_id
			}catch(e){}
		}
	}
</script>
<style lang="scss" scoped>
	
</style>